<template>
  <div class="loading-button">
    <el-button :loading="loading" v-bind="props" @click="onClick">
      <slot></slot>
    </el-button>
  </div>
</template>

<script setup lang="ts">
import type { ButtonProps } from "element-plus";

// 获取默认参数
const attrs = useAttrs();
// ButtonProps:自带button类  Omit:排除掉loading属性 Partial:必选参数改为可选
const props = defineProps<Partial<Omit<ButtonProps, "loading">>>();
// 阻止事件穿透
defineOptions({
  inheritAttrs: false,
});
const loading = ref(false);

const onClick = async () => {
  loading.value = true;
  try {
    // @ts-ignore
    await attrs?.onClick?.();
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped lang="scss"></style>
